<template>
  <div>
    <group label-width="4.5em" class="info_div" label-margin-right="2em" label-align="right">
        <x-input title="学校" v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.schoolName"></x-input>
        <x-input title="学号" v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.no"></x-input>
        <x-input title="姓名" v-show="!isCanEdit" :readonly="!isCanEdit" text-align="right" v-model="userInfo.name"></x-input>
        <x-input title="身份证" v-show="!isCanEdit" :readonly="!isCanEdit" text-align="right" v-model="showIdCard"></x-input>
        <x-input title="手机号" :max="11"  :readonly="!isCanEdit" text-align="right" v-model="userInfo.cellphone"></x-input>
        <x-input title="邮箱" :max="30" :readonly="!isCanEdit" text-align="right" v-model="userInfo.mail"></x-input>
        <x-input title="性别" v-show="!isCanEdit" :readonly="!isCanEdit" text-align="right" v-model="showSex"></x-input>
        <x-input title="所属院系"  v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.departmentName"></x-input>
        <x-input title="专业"  v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.majorName"></x-input>
        <x-input title="年级"  v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.schoolYearName"></x-input>
        <x-input title="班级"  v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.className"></x-input>
        <div class="zbtc_parent">
        <div class="zbtc" v-show="!isCanEdit" ></div>
        <selector v-model="userInfo.politicalStatus"  direction="rtl"  title="政治面貌" :options="zhengzhiList"></selector>
        </div>
        <div class="zbtc_parent">
        <div class="zbtc" v-show="!isCanEdit" ></div>
          <cell :title="'头像'">
          <div>
            <imgUpload :extClass="'upload_self_img'" @uploadOkEvent="uploadOkEvent" :height="'80px'" :imgSrc="userInfo.headImg"
                  :defaultSrc="'./static/img/avatar_default.png'" ref="imgUpload"></imgUpload>
          </div>
        </cell>
        </div>
     
    </group>
  <div class="button_div">
    <x-button action-type="button" v-show="isCanEdit" class="dskt_btn" type="warn" @click.native="onSave">保存</x-button>
    <x-button action-type="button" v-show="!isCanEdit" class="dskt_btn" type="primary" @click.native="isCanEdit=true">编辑</x-button>
  </div>
  </div>
</template>

<script>
import userService from '../../shared/service/userService'
import { XImg, Group, Cell ,XInput ,XTextarea,Selector } from "vux";
import imgUpload from "../../components/imgUpload.vue";
import baseService from '../../shared/service/baseService'
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { userInfo } from 'os';

export default {
  components: {
    XImg,
    Group,
    Cell,
    Selector,
    XInput, 
    XTextarea, 
    imgUpload,
  },
  
  data() {
    return {
      loginUserId:this.$cookie.getUserId(),
      loginFileId:this.$cookie.get(this.$cookie.key.userFileId),
      userInfo:{},
      isCanEdit:false,
      showIdCard:"",
      showSex:"男",
      zhengzhiList:[
         {key: '0', value: '群众'}, {key: '1', value: '团员'}, {key: '2', value: '预备党员'}, {key: '3', value: '党员'}, {key: '4', value: '参军'}
      ],
    };
  },
  mounted() {
     weixinService.initWx(wx);
    //页面滚动给顶部的搜索栏添加一个样式.
    this.getData();
  },
  methods: {
    getData() {
       userService.getStudentInfo(this.loginFileId).then((res)=>{
          this.userInfo=res.data;
          var idcard = this.userInfo.idNo;
          this.showIdCard=idcard;//.substring(0,4)+"****"+idcard.substring(idcard.length-4,idcard.length);
          if(this.userInfo.sex==0)
            this.showSex="女";
          this.$refs.imgUpload.setImgSrc(this.userInfo.headImg);
      });
    },
    uploadOkEvent(fileSrc) {
      userService.updateStudentInfo({id:this.loginFileId,headImg:fileSrc}).then((res)=>{
                userService.updateStudentCheckInfo(fileSrc).then((res)=>{
                });
                this.$refs.imgUpload.setImgSrc(fileSrc);
                this.userInfo.headImg = fileSrc;
                this.$cookie.set(this.$cookie.key.headImg , fileSrc);
                this.$vux.toast.text("头像更新成功");
      });
    },
    onSave(){
      if(this.userInfo.cellphone.length!=11){
        this.$vux.toast.text("手机号错误");
        return;
      }
      
      if( !this.$commonUtil.isPoneAvailable(this.userInfo.cellphone) ){
        this.$vux.toast.text("手机号错误");
        return;
      }

      userService.updateStudentInfo(this.userInfo).then((res)=>{
                this.$cookie.setLoginUserData(this.userInfo);
                this.$vux.toast.text("保存成功");
                this.isCanEdit=false;
      });
    }
  }
};
</script>

<style scoped>
.button_div{
  padding: 20px 15%;
}

.zbtc_parent{
    position: relative;
}

.zbtc{
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
</style>
